<!-- 
  租赁中：黄色；
  借出、处置：粉色；
  丢弃：灰色；
  空闲：绿色
-->
<template>
  <div
    class="record-content"
    :class="[
      'record-content-type-' +
        (record.statusName == '租赁中' ? 'yellow' : record.statusName == '丢弃' ? 'gray' : record.statusName == '空闲' ? 'green' : 'pink'),
    ]"
  >
    <div v-if="record.statusName != '租赁中'">{{ record.statusName }}</div>
    <template v-if="record.statusName != '停用'">
      <div v-if="record.statusName != '空闲'">{{ record.amount || '0' }}元</div>
      <div>{{ record.rate || '0' }}%</div>
    </template>
  </div>
</template>

<script setup>
  const props = defineProps({
    record: {
      type: Object,
      default() {
        return {}
      },
    },
  })
</script>
<style lang="less" scoped>
  .record-content {
    width: 120px;
    height: 85px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
    padding: 10px 8px;
    margin: -9px -16px;
    line-height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .record-content-type-yellow {
    background: #ffead3;
  }
  .record-content-type-gray {
    background: #f2f2f3;
  }
  .record-content-type-green {
    background: #d8f3bd;
  }
  .record-content-type-pink {
    background: #fdedef;
  }
</style>
